<script lang="ts">
    import {
        EXTDATA_TYPE_GIT,
        GIT_SERV_ATOMGIT,
        GIT_SERV_GITCODE,
    } from "$lib/api/board/board_extdata";
    import { get_user_session } from "$lib/api/user";
    import { request } from "$lib/utils/request";
    import { Modal } from "@skeletonlabs/skeleton-svelte";
    import type { XYPosition } from "@xyflow/svelte";
    import { X } from "lucide-svelte";
    import { drawStore } from "../../store.svelte";
    import AtomGitIssueList from "./AtomGitIssueList.svelte";
    import GitCodeIssueList from "./GitCodeIssueList.svelte";
    import type { DevelopIssueContent } from "$lib/api/board/board_draw_type";
    import { create_node } from "$lib/api/board/board_draw";

    interface ModalProps {
        width: number;
        height: number;
        position: XYPosition;
        onClose: () => void;
    }
    let props: ModalProps = $props();

    let curGitServ = $state(
        drawStore.extDataInfoList.length > 0
            ? drawStore.extDataInfoList[0]
            : null,
    );
    let curSelIssue = $state(null as null | DevelopIssueContent);

    async function createNode() {
        if (curSelIssue == null) {
            return;
        }
        const sessionId = await get_user_session();
        await request(
            create_node({
                session_id: sessionId,
                board_id: drawStore.boardInfo?.board_id ?? "",
                draw_id: drawStore.drawId,
                x: props.position.x,
                y: props.position.y,
                w: props.width,
                h: props.height,
                content: {
                    DevelopIssueContent: curSelIssue,
                },
                node_style: {
                    bg_color: "bg-surface-200",
                    border_width: "border-2",
                    border_color: "border-surface-300",
                    font_color: "text-surface-800",
                    layer: 0,
                },
            }),
        );
        props.onClose();
    }
</script>

<Modal
    open={true}
    triggerBase="btn preset-tonal"
    contentBase="card bg-surface-200-800 p-4 space-y-4 shadow-xl shadow-surface-500 w-[800px]"
    backdropBase="backdrop-none"
    closeOnEscape={false}
    closeOnInteractOutside={false}
    onOpenChange={(ev) => {
        if (!ev.open) {
            props.onClose();
        }
    }}
>
    {#snippet content()}
        <header class="flex justify-between">
            <h4 class="h4">创建Git议题节点</h4>
            <button
                type="button"
                class="btn preset-ghost-primary-500"
                onclick={() => props.onClose()}
            >
                <X />
            </button>
        </header>

        {#if curGitServ == null}
            <main class="flex items-center justify-center">
                加载Git服务列表中...
            </main>
        {:else}
            <main class="relative">
                <div
                    class="absolute right-[50px] -top-[50px] flex gap-x-4 items-center"
                >
                    <div>Git服务:</div>
                    <select
                        class="select rounded-none bg-surface-100-900 w-[150px]"
                        value={curGitServ.ext_data_id}
                        onchange={(e) => {
                            const newGitServ = drawStore.extDataInfoList
                                .filter(
                                    (item) =>
                                        item.basic_info.ext_data_type ==
                                        EXTDATA_TYPE_GIT,
                                )
                                .find(
                                    (item) =>
                                        item.ext_data_id ==
                                        e.currentTarget.value,
                                );
                            if (newGitServ != undefined) {
                                curGitServ = newGitServ;
                            }
                            curSelIssue = null;
                        }}
                    >
                        {#each drawStore.extDataInfoList.filter((item) => item.basic_info.ext_data_type == EXTDATA_TYPE_GIT) as gitServ}
                            <option value={gitServ.ext_data_id}
                                >{gitServ.basic_info.name}</option
                            >
                        {/each}
                    </select>
                </div>
                <div>
                    {#if curGitServ.basic_info.serv_type.GitServType == GIT_SERV_ATOMGIT}
                        <AtomGitIssueList
                            gitServId={curGitServ.ext_data_id}
                            accessToken={curGitServ.basic_info.access_token}
                            onSelect={(selIssue) => (curSelIssue = selIssue)}
                        />
                    {:else if curGitServ.basic_info.serv_type.GitServType == GIT_SERV_GITCODE}
                        <GitCodeIssueList
                            gitServId={curGitServ.ext_data_id}
                            accessToken={curGitServ.basic_info.access_token}
                            onSelect={(selIssue) => (curSelIssue = selIssue)}
                        />
                    {/if}
                </div>
            </main>
            <footer class="flex justify-end gap-4">
                <button
                    type="button"
                    class="btn preset-tonal"
                    onclick={() => props.onClose()}>取消</button
                >
                <button
                    type="button"
                    class="btn preset-filled-primary-900-100"
                    disabled={curSelIssue == null}
                    onclick={() => {
                        createNode();
                    }}
                >
                    确定
                </button>
            </footer>
        {/if}
    {/snippet}
</Modal>
